<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>HOME</title>
    <!--公共css-->
    <div th:replace="common :: common-css"></div>


</head>
<body>

<!--顶部导航-->
<!--注：是<nav>包裹.container-fluid-->
<div th:replace="common :: top-nav"></div>
<!--顶部导航-->

<!--页面主体-->
<div class="container-fluid">
    <div class="row">
        <!--左侧导航-->
        <div th:replace="common :: left-nav"></div>
        <!--左侧导航-->

        <!--右侧内容-->
        <div class="col-xs-10 ">
            <!--切换内容面板-->
            <ul class="nav nav-tabs">
                <!-- 初始时这个呈点击状态-->
                <li class="active"><a href="#home" data-toggle="tab">电影信息</a></li>
                <li shiro:hasAnyRoles="Clerk,Manager,Admin,SuperAdmin"><a href="#rental" data-toggle="tab">出借</a></li>
                <li shiro:hasAnyRoles="Clerk,Manager,Admin,SuperAdmin"><a href="#profile" data-toggle="tab">本店当前借出</a>
                </li>
                <li shiro:hasAnyRoles="Admin,SuperAdmin"><a href="#settings" data-toggle="tab">导航四</a></li>
                <li shiro:hasAnyRoles="Clerk,Manager,Admin,SuperAdmin" class="pull-right">
                    <a href="javascript:;" class="btn btn-success btn-sm">出借</a>
                </li>
            </ul>

            <!-- 内容面板 -->
            <div class="tab-content"><!--初始化就展示的内容搭配渐变fade需要加in -->

                <!--电影信息-->
                <div class="tab-pane active in fade" id="home">
                    <div class="table-responsive">
                        <div style="float: right;margin-top: 0px;"> <!--每页显示几条-->
                            <select id="film_info_tab_pageSize" style="margin-top: 10px">
                                <option value="10" selected="selected">10条</option>
                                <option value="20">20条</option>
                                <option value="30">30条</option>
                                <option value="40">40条</option>
                                <option value="50">50条</option>
                                <option value="100">100条</option>
                            </select>
                        </div>
                        <table class="table table-striped table-bordered table-hover table-condensed">
                            <thead>
                            <tr>
                                <th class="text-center">
                                    <a href="javascript:;"> 编号 </a>
                                </th>
                                <th class="text-center"><a href="javascript:;">标题</a></th>
                                <th class="text-center"><a href="javascript:;">特色</a></th>
                                <th class="text-center"><a href="javascript:;">类型</a></th>
                                <th class="text-center"><a href="javascript:;">等级</a></th>
                                <th class="text-center"><a href="javascript:;">发行日期</a></th>
                                <th class="text-center"><a href="javascript:;">详情</a></th>
                            </tr>
                            </thead>

                            <tbody id="film_tab_tbody">

                            </tbody>
                        </table>

                        <!--分页-->
                        <nav class="col-xs-10 col-xs-offset-1">
                            <ul id="film_info_tab_pagination" class="pagination pagination-lg">
                                <!-- <li id="prePage">
                                     <a href="javascript:;">
                                         <span>&laquo;</span>
                                     </a>
                                 </li>上一页按钮-->
                                <!--<li class="active"><a href="javascript:;">1</a></li>-->
                                <!--<li><a href="javascript:;">2</a></li>-->
                                <!--<li><a href="javascript:;">3</a></li>-->
                                <!--<li><a href="javascript:;">4</a></li>-->
                                <!--<li><a href="javascript:;">5</a></li>-->
                                <!--<li><a href="javascript:;">6</a></li>-->
                                <!--<li><a href="javascript:;">7</a></li>-->
                                <!--<li><a href="javascript:;">8</a></li>-->
                                <!--<li><a href="javascript:;">9</a></li>-->
                                <!--<li><a href="javascript:;">10</a></li>-->
                                <!--<li><span class="glyphicon glyphicon-option-horizontal" disabled="disable"></span></li>-->
                                <!--<li><a href="#">500</a></li>-->
                                <!--<li><a href="#">1000</a></li>-->
                                <!--  <li id="nextPage">
                                      <a href="#">
                                          <span>&raquo;</span>
                                      </a>
                                  </li> 下一页按钮-->
                                <!--
                                <li class="dropup">
                                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                                        GOTO
                                        <span class="caret"></span>
                                    </a>
                                    <ul id="gotoMenu" class="dropdown-menu" style="height: 250px; overflow-y: scroll;">
                                        <li class="active"><a href="#">狗春</a></li>
                                        <li><a href="javascript">狗财</a></li>
                                        <li><a href="#">狗亮</a></li>
                                    </ul>
                                </li>-->
                            </ul>
                        </nav>
                        <!--分页-->
                    </div><!--table-responsive-->
                </div>

                <!--出租-->
                <div shiro:hasAnyRoles="Clerk,Manager,Admin,SuperAdmin" class="tab-pane fade" id="rental">
                    <div class="panel panel-primary">
                        <div class="panel-body">
                            <select class="col-sm-2" style="height: 34px;">
                                <option value="byFilmTitle">按 电影名</option>
                                <option value="byFilmId">按 电影编号</option>
                                <option value="byFilmType">按 电影类型</option>
                                <option value="byFilmRating">按 电影等级</option>
                                <option value="byActorName">按 演员名称</option>
                            </select>
                                <input type="text" class=" col-sm-6"  style="height: 34px; margin-left: 4px" placeholder="搜索">
                                <button id="rental_serach_btn" class="btn btn-default  col-sm-2" style="height: 34px; margin-left: 4px">搜索</button>
                        </div>
                        <div class="panel-footer ">
                            <div id="rental_serach_warning"  class="alert alert-danger hidden text-center" >
                                <strong>警告!</strong><span id="rental_serach_warning_msg"></span>
                            </div>
                        </div>

                        <!-- Table -->
                        <table class="table  table-striped table-bordered table-hover table-condensed hidden">
                            <thead>
                            <tr>
                                <th  class="text-center"><a href="javascript:;">编号</a></th>
                                <th  class="text-center"><a href="javascript:;">标题</a></th>
                                <th  class="text-center"><a href="javascript:;">特色</a></th>
                                <th  class="text-center"><a href="javascript:;">类型</a></th>
                                <th  class="text-center"><a href="javascript:;">等级</a></th>
                                <th  class="text-center"><a href="javascript:;">发行日期</a></th>
                                <th  class="text-center"><a href="javascript:;">操作</a></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>狗春</td>
                                <td>3</td>
                                <td>狗</td>
                                <td>狗春</td>
                                <td>3</td>
                                <td>狗</td>
                                <td><button class="btn btn-success btn-sm">借出</button></td>
                            </tr>
                            <tr>
                                <td>狗春</td>
                                <td>3</td>
                                <td>狗</td>
                                <td>狗春</td>
                                <td>3</td>
                                <td>狗</td>
                                <td><button class="btn btn-success btn-sm">借出</button></td>
                            </tr>
                            <tr>
                                <td>狗春</td>
                                <td>3</td>
                                <td>狗</td>
                                <td>狗春</td>
                                <td>3</td>
                                <td>狗</td>
                                <td><button class="btn btn-success btn-sm">借出</button></td>
                            </tr>
                            </tbody>
                        </table>
                        <!-- 根据演员名字搜索的Table -->
                        <table id="byActorName_table" class="table  table-striped table-bordered table-hover table-condensed hidden">
                            <thead>
                            <tr>
                                <th  class="text-center"><a href="javascript:;">姓名</a></th>
                                <th  class="text-center"><a href="javascript:;">操作</a></th>

                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>

                    </div>
                </div>

                <!--尚未归还列表-->
                <div shiro:hasAnyRoles="Clerk,Manager,Admin,SuperAdmin" class="tab-pane fade" id="profile">
                    <div class="table-responsive">
                        <div style="float: right;margin-top: 0px;"> <!--每页显示几条-->
                            <select id="unreturn_tab_pageSize" style="margin-top: 10px">
                                <option value="10" selected="selected">10条</option>
                                <option value="20">20条</option>
                                <option value="30">30条</option>
                                <option value="40">40条</option>
                                <option value="50">50条</option>
                            </select>
                        </div>
                        <table class="table table-striped table-bordered table-hover table-condensed">
                            <thead>
                            <tr>
                                <th class="text-center"><a href="javascript:;">库存编号</a></th>
                                <th class="text-center"><a href="javascript:;">影片名</a></th>
                                <th class="text-center"><a href="javascript:;">顾客ID</a></th>
                                <th class="text-center"><a href="javascript:;">借出时间</a></th>
                                <th class="text-center"><a href="javascript:;">归还时间</a></th>
                                <th class="text-center"><a href="javascript:;">借出员工ID</a></th>
                                <th class="text-center"><a href="javascript:;">操作</a></th>
                            </tr>
                            </thead>

                            <tbody id="unreturn_tab_tbody">

                            </tbody>
                        </table>

                        <!--分页-->
                        <nav class="col-xs-10 col-xs-offset-1">
                            <ul id="unreturn_tab_pagination" class="pagination pagination-lg">

                            </ul>
                        </nav>
                        <!--分页-->
                    </div><!--table-responsive-->
                </div>

                <div shiro:hasAnyRoles="Admin,SuperAdmin" class="tab-pane fade" id="settings">导航四的内容</div>
            </div>

        </div>
        <!--右侧内容-->

    </div><!--row-->

</div><!--container-fluid-->
<!--页面主体-->


<!--模态框-->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 id="modalTitle" class="modal-title">详情</h4>
            </div> <!--modal-header-->

            <div id="modalBody" class="modal-body">

            </div><!--modal-body-->

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" class="btn btn-primary" disabled>修改</button>-->
            </div><!--modal-footer-->

        </div>
    </div>
</div>
<!--模态框-->

<!--登录模态框-->
<div id="loginModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Sign In</h4>
            </div> <!--modal-header-->

            <div class="modal-body">

                <form action="">
                    <div class="form-group">
                        <input id="userName" name="userName" autocomplete="off" type="text" class="form-control"
                               placeholder="Your ID">
                        <span id="userNameWarning" class=" text-danger hidden" style="margin-left: 4px;">必须输入账号</span>
                    </div>
                    <div class="form-group">
                        <input id="pwd" name="pwd" type="password" autocomplete="off" class="form-control"
                               placeholder="Password">
                        <span id="pwdWarning" class="text-danger hidden" style="margin-left: 4px;">必须输入密码</span>
                    </div>
                    <div class="form-group">
                        <select id="userRating" name="userRating" class="form-control">
                            <!--<option value="customer" >会员</option>-->
                            <option value="staff" class=" text-danger">员工</option>
                        </select>
                    </div>
                    <div class="checkbox ">
                        <label>
                            <input type="checkbox">remeber me
                        </label>
                    </div>
                    <input id="loginSubmit" value="Sign In" class="btn btn-success btn-lg btn-block">
                </form>

            </div><!--modal-body-->

            <div class="modal-footer">

            </div><!--modal-footer-->

        </div>
    </div>
</div>
<!--登录模态框-->


<!--结算模态框-->
<div id="return_film_modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">结算</h4>
            </div>
            <!--modal-header-->

            <div id="return_film_modalBody" class="modal-body">
                <div class="form-horizontal">
                    <!--影片名-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">影片名</label>
                        <div class="col-sm-8">
                            <input type="tel" readonly class="form-control text-center">
                        </div>
                    </div>
                    <!--顾客id-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">顾客id</label>
                        <div class="col-sm-8">
                            <input type="tel" readonly class="form-control text-center">
                        </div>
                    </div>
                    <!--出借员工-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">出借员工</label>
                        <div class="col-sm-8">
                            <input type="tel" readonly class="form-control text-center">
                        </div>
                    </div>
                    <!--借出时间-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">借出时间</label>
                        <div class="col-sm-8">
                            <input type="tel" readonly class="form-control text-center">
                        </div>
                    </div>

                    <!--周期/比率/成本-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label"
                               style="padding-left: 0px;padding-right: 0px;">周期/比率/成本</label>
                        <div class="col-sm-8">
                            <div class="input-group ">
                                <input type="tel" readonly class="form-control text-center">
                                <div class="input-group-addon "><strong>/</strong></div>
                                <input type="tel" readonly class="form-control text-center">
                                <div class="input-group-addon "><strong>/</strong></div>
                                <input type="tel" readonly class="form-control text-center">
                            </div>
                        </div>
                    </div>

                    <!--归还日-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">归还日</label>
                        <div id="return_time_div" class="col-sm-8">
                            <!--动态生成,否则laydata不能重设min/max
                            <input type="text" id="return_time" readonly class="form-control text-center" style="background-color: #fff;">
                                         -->
                        </div>
                    </div>
                    <!--应付款-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">应付款</label>
                        <div class="col-sm-8">
                            <div class="input-group ">
                                <div class="input-group-addon ">$</div>
                                <input type="tel" readonly class="form-control text-right">
                                <div class="input-group-addon "><strong>.</strong></div>
                                <input type="tel" readonly class="form-control" value="00">
                            </div>
                        </div>
                    </div>
                    <!--实付款-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">实付款</label>
                        <div class="col-sm-8 ">
                            <div class="input-group ">
                                <div class="input-group-addon ">$</div>
                                <input type="tel" class="form-control text-right" placeholder="00">
                                <div class="input-group-addon "><strong>.</strong></div>
                                <input type="tel" class="form-control" placeholder="00">
                            </div>
                        </div>
                        <a class="col-sm-2 " href="javascript:;" style="padding-left: 0px;">同上</a>
                    </div>


                </div>
            </div>
            <!--modal-body-->

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-success" id="return_film_modal_submit">提交</button>
                <div id="return_film_modal_warning" class="alert alert-danger alert-dismissable text-center"
                     style="margin-top: 6px;" hidden>
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                    <strong>警告!</strong><span>警告信息</span>
                </div>
            </div>
            <!--modal-footer-->

        </div>
    </div>
</div>
<!--结算模态框-->

<!--出借模态框-->
<div id="rental_modal" class="modal fade" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4  class="modal-title">借出</h4>
            </div>
            <!--modal-header-->

            <div id="rental_modal_Body" class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label ">影片名</label>
                        <div class="col-sm-8">
                            <input type="tel" readonly class="form-control text-center" value="狗春">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">顾客id</label>
                        <div class="col-sm-8">
                            <input type="tel"  class="form-control text-center">
                        </div>
                        <span style="color: red; ">(必填)</span>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">借出时间</label>
                        <div class="col-sm-8">
                            <input id="rental_time" type="tel" readonly  class="form-control text-center" style="background-color: #fff">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">库存编号</label>
                        <div class="col-sm-8">
                            <input type="tel" readonly  class="form-control text-center">
                        </div>
                    </div>
                </div>
            </div>
            <!--modal-body-->

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="rental_modal_submit" >提交</button>

                <div hidden  class="alert alert-danger alert-dismissable text-center " style="margin-top: 6px;" >
                    <button type="button" class="close" data-dismiss="alert" >
                        <span >&times;</span>
                    </button>
                    <strong>警告!</strong><span ></span>
                </div>

            </div>
            <!--modal-footer-->

        </div>
    </div>
</div>
<!--出借模态框-->


<!--公共js-->
<div th:replace="common :: common-js"></div>
<!--电影信息表格的js-->
<script th:src="@{/assets/js/filmTab.js}"></script>

<!--出借js-->
<script th:src="@{/assets/js/rental.js}"></script>

<!--当前借出表格的js-->
<script th:src="@{/assets/js/unreturnTab.js}"></script>



<!--顶部导航的操作-->
<script th:src="@{/assets/js/home-topnav.js}"></script>
</body>


<script>
    // 测试直接访问localhost:8888/项目名/页面名.html,自动访问后端获取数据
    $(document).ready(function () {

        //获取项目,带斜杠如:/项目名
        projectName = window.document.location.pathname.match(/^[/]{1}\w*/);

        queryAllFilm();//查询所有必须的数据,需要的参数(projectName, currentPage, pageSize)

        //登录模态框的登录按钮
        $("#loginSubmit").click(function () {
            $("#userNameWarning").addClass("hidden");
            $("#pwdWarning").addClass("hidden");

            //顾客customer  员工staff
            let userRating = $("#userRating").val();
            let userName = $("#userName").val();
            let pwd = $("#pwd").val();

            $.ajax({
                url: projectName + "/userController/login",
                data: {"userName": userName, "pwd": pwd, "userRating": userRating},
                type: "post",
                success: function (result) {
                    if ("账号错误" == result) {
                        $("#userNameWarning").removeClass("hidden");
                        $("#userNameWarning").text("账号错误");
                    } else if ("密码错误" == result) {
                        $("#pwdWarning").removeClass("hidden");
                        $("#pwdWarning").text("密码错误");
                    } else if ("success" == result) {
                        // hasLogin(true, userRating, userName);
                        $("#loginModal").modal('hide');//关闭模态框
                        window.location.href = window.location.href;//全局刷新,因为有shiro
                    } else {
                        $("#userNameWarning").removeClass("hidden");
                        $("#userNameWarning").text(result);
                    }
                }
            });

        });

        //切换到当前借出表格
        $("[href=\"#profile\"]").on("shown.bs.tab", function () {
            getAllUnreturnedInfo();
        });
    });


    /*
     json的key：和数据库不同(自动转的)
            description: "xxxx"
            filmId: 1
            languageId: 1
            lastUpdate: "2006-02-14T21:03:42.000+00:00"
            length: 86
            originalLanguageId: 0
            rating: "PG"
            releaseYear: "2006-01-01"
            rentalDuration: 6
            rentalRate: 0.99
            replacementCost: 20.99
            specialFeatures: "Deleted Scenes,Behind the Scenes"
            title: "ACADEMY DINOSAUR"
   */
</script>

</html>